<template>
    <BorderBox8 class="content">
        <div class="dv-border-box-content">
            <div class="content-table">
                <scrollBoard v-bind="scrollBoardOtion" width="1870" height="320"></scrollBoard>
            </div>
        </div>
    </BorderBox8>
</template>

<script setup lang="ts">
import { onMounted,ref,reactive} from "vue";
import { BorderBox8 } from '@dataview/datav-vue3';
//@ts-ignore
import ScrollBoard from './ScrollBoard.vue';
import { reqOrderList, reqExceptOrderList } from "#/api/jflScreen/index";

const orderInfo =  reactive({
    page:1,
    size:10,
    total:0,
    timer:null
});

const scrollBoardOtion = reactive({
    header:['生产订单','生产工单','异常类型','异常名称','异常发生时间','异常时长','异常描述','处理状态','异常上报人','处理措施','处理人','处理时长'],
    dataset:[],
    columnWidth:[200,200,150,150,150,150,150,150,150,150,120,120]
});


const getExceptOrderList = () => {
    const { page,size } = orderInfo;
    const params = { page,size };
    reqExceptOrderList(params).then(response => {
        const list = response.data.content;
        const total = response.data.totalElements;
        const arrayList = [];
        for(let i = 0; i < list.length; i++){
            const tmp = list[i];
            const arrItem = [];
            const obj = {
                productOrderInfoCode: tmp.productOrderInfoCode,
                workOrderShellCode:tmp.workOrderShellCode,
                exceptType:tmp.exceptType,
                exceptName:tmp.exceptName,
                exceptStartTime:tmp.exceptStartTime,
                exceptTimeLong:(tmp.exceptTimeLong || 0) + 'min',
                exceptDesc:tmp.exceptDesc,
                state:tmp.state == 0 ? "<span style='color:red'>未处理</span>" : "<span style='color:green'>已处理</span>",
                reporter: tmp.reporter,
                solutionDesc:tmp.solutionDesc,
                resolver:tmp.resolver,
                processTimeLong:(tmp.processTimeLong || 0) + 'min'
            };
            Object.entries(obj).forEach(([key, value]) => { 
                arrItem.push(value);
            });
            arrayList.push(arrItem);
        }
        scrollBoardOtion.dataset = arrayList;
        orderInfo.total = total;
    });
}

const init = () => {
    const { page,size,total } = orderInfo;
    if(page * size >= total){
        orderInfo.page = 1;
    } else {
        orderInfo.page ++;
    }
    getExceptOrderList();
    if(orderInfo.timer) clearTimeout(orderInfo.timer);
    orderInfo.timer = setTimeout(() => {
        init();
    }, 1000 * 60);
}

onMounted(() => {
    init();
});
</script>
<style lang='scss' scoped>
.content{
    width:100%;
    height:100%;
    display: flex;
    flex-direction: column;
    .content-table{
        width:100%;
        height:100%;
        padding:10px;
    }
}
</style>